<template>
	<view class="inform">
		<headertop title="个人资料" str1="oridei" :back1="back1"></headertop>
		<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Rectangle 21541@2x.png" class="inform_back"
			mode=""></image>
		<view class="center">
			<view class="center_item">
				<view class="center_item_top">
					<view class="tx">
						头像:
					</view>
					<button class="righttex" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image
							:src="userobj.avatar||'https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11486@2x.png'"
							class="rightteximg" mode=""></image>
					</button>

				</view>
				<view class="center_item_bottom">
					<view class="tx">
						昵称:
					</view>
					<view class="tx">
						<input type="text" v-model="userobj.nickname" placeholder="请输入昵称" />
					</view>
				</view>
			</view>

		</view>
		<view class="savebottom">
			<image class="save" src="/static/Group 11497@2x.png" mode="widthFix" @click="save"></image>
		</view>
	</view>
</template>

<script>
	import {
		userinfo,
		userprofile
	} from '@/common/api/api.js'
	import uploadSrc from '@/common/upload.js'
	import headertop from '@/components/header.vue'
	export default {
		components: {
			headertop
		},
		data() {
			return {
				back1: 0,
				userobj: {},
			}
		},
		onShow() {
			this.getuserinfo()
		},
		onPageScroll(e) {
			console.log(e, 'eeeeeeeeeeeeeee');
			if (e.scrollTop > 100) {
				this.back1 = '#A2AEFF'
			} else {
				this.back1 = ''
			}
		},
		methods: {
			// 获取微信头像
			onChooseAvatar(e) {
				var that = this
				console.log(e.detail, 'e.detail.avatarUrle.detail.avatarUrl');
				uni.uploadFile({
					url: uploadSrc, //仅为示例，非真实的接口地址
					filePath: e.detail.avatarUrl,
					name: 'file',
					header: {
						token: uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						that.userobj.avatar = JSON.parse(uploadFileRes.data).data.fullurl
					}
				});
				// 注意:这里拿到的头像url是个临时的路径,需要自行对头像进行上传处理,参考uni.upload()
			},
			async save() {
				if (!this.userobj.avatar && !this.userobj.nickname) {
					uni.showToast({
						title: '请补全头像或昵称',
						icon: 'none'
					})
					return
				}
				const res = await userprofile({
					nickname: this.userobj.nickname,
					avatar: this.userobj.avatar
				})
				if (res.code == 1) {
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			uploadimg() {
				var that = this
				uni.chooseImage({
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: uploadSrc, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								token: uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								console.log(that.userobj, 'this.userobj--------------');
								that.userobj.avatar = JSON.parse(uploadFileRes.data).data.fullurl
								console.log(uploadFileRes.data);
							}
						});
					}
				});

			},
			async getuserinfo() {
				const res = await userinfo()
				if (res.code == 1) {
					this.userobj = res.data.user
				}
			}
		}
	}
</script>

<style lang="scss">
	input {
		text-align: right;
	}

	page {
		background: #F7F8FA;
	}


	.inform {
		width: 100%;
		overflow: hidden;
		position: relative;
		height: 100vh;
		display: flex;

		&_back {
			width: 100%;
			height: 314rpx;
			position: absolute;
			z-index: -1;
		}

		.member {
			width: 686rpx;
			overflow: hidden;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			margin: auto !important;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-top: 22rpx !important;

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #1D2129;
				margin-left: 28rpx;
			}

			.num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #1D2129;
				margin-right: 28rpx;
			}
		}

		.savebottom {
			width: 100%;
			display: flex;
			bottom: 100rpx;
			position: absolute;
			justify-content: center;

			.save {
				width: 686rpx;
				height: 88rpx;
			}
		}


		.center {
			width: 686rpx;
			overflow: hidden;
			margin: auto;
			margin-top: 208rpx;

			&_item {
				width: 686rpx;
				height: 230rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				overflow: hidden;

				&_bottom {
					width: 630rpx;
					margin: auto;
					height: 100rpx;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				&_top {
					width: 630rpx;
					margin: auto;
					height: 128rpx;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #F2F2F2;

					.tx {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #1D2129;


					}

					.righttex {
						width: 76rpx;
						height: 76rpx;
						border-radius: 50%;
						position: relative;
						display: flex;
						border: none !important;
						align-items: center;
						overflow: auto !important;
						// background: $btn !important;
						background-color: none !important;
						background-size: 100% 138% !important;
						padding-left: 0 !important;
						padding-right: 0 !important;
						margin-left: 0rpx !important;
						-webkit-tap-highlight-color: none !important;
						margin-right: 0 !important;
						overflow: hidden !important;

						.rightteximg {
							width: 88rpx;
							height: 88rpx;
							position: absolute;
						}

					}

				}
			}
		}

	}
</style>